<template>
	<view class="wrap">
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="item.id==current?'text-green cur':''" v-for="item in navData"
				:key="item.id" @tap="tabSelect" :data-id="item.id">
				{{item.name}}
			</view>
		</scroll-view>
			<!-- <scroll-view scroll-y class="scroll-view-height list-content"> -->
				<!-- <view style="height:100%;" class="uni-tab-bar padding-top-sm"> -->
				<!-- <view class="tn-margin-sm">
					<tn-swiper :list="banners" imageMode="scaleToFill" :height="300" :effect3d="false"
						mode="dot"></tn-swiper>
				</view> -->
				<swiper class="scroll-view-height" @change="swipeIndex" :current="current" :duration="300">
					<swiper-item v-for="item in navData" :key="item.id">
					<scroll-view scroll-y class="scroll-view-height list-content">
						<view class="cu-chat content_CourseList" v-if="item.courseList.length > 0">
								<view class="flex  courseList" v-for="list in item.courseList" :key="list.id" @click="lookChapter(list.skip_status,list.id)">
									<view class="flex leftBox">
										<view class="courseImg">
											<image :src="list.thumb_image"></image>
										</view>
										<view class="cu-chat justify-center courseText">
											<text>{{ list.name }}</text>
											<text>总章节：{{list.chapter}}</text>
											<text>授课老师：{{list.author}}</text> 
										</view>
									</view>
									<!-- <view class="rightBox">
										<text v-if="list.isAnswer == 0"><text class="cuIcon-edit"  style="color: red;">未完成答题</text></text>
										<text v-if="list.isAnswer == 1"><text class="cuIcon-edit" style="color: green;">已完成答题</text></text>
									</view> -->
								</view>
						</view>
						<tuinodata imgUrl="/static/img/img_noorder_3x.png" v-else>暂无数据</tuinodata>
					</scroll-view>
					</swiper-item>
				</swiper>
				<!-- </view> -->
			<!-- </scroll-view> -->
			<login ref="login" @succ="succ"></login>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import tuinodata from '@/components/tui-no-data/tui-no-data.vue'
	import { getCourseList , skipQuestion} from '@/api/index.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				current: 0,
				scrollLeft: 0,
				navData: [],
			};
		},
		components:{
			tuinodata
		},
		onShow(){
			if (uni.getStorageSync('token')) {
				this.isLogin = true
			} else {
				  
				this.$nextTick(() => {
					this.$refs.login.modal = true;
				})
			}
			this.getCourse()
		},
		methods: {
			succ(){
				this.getCourse()	
			},
			async getCourse(){
				try{
					const res = await getCourseList()
					if(res.data.code == 1){
						this.navData = res.data.data
					}
				}catch(e){
					console.log(e);
				}
			},
			tabSelect(e) {
				this.current = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			swipeIndex(index) {
				// 通过tab组件回调点击切换的index同步swiper的current索引
				this.current = index.target.current
			},
			lookChapter(isAnswer,courseId){
				//判断是否答题
				if(isAnswer === 1){
					//跳转查看章节页面
					uni.navigateTo({
						url:`/pages/chapterPage/chapterPage?course_id=${courseId}&isAnswer=${isAnswer}`
					})
					// uni.hideHomeButton()
				}else{
					//添加弹框状态 
					uni.showModal({
						title: '提示',
						content: '学习前需要进行测试，会根据测试结构推荐学习内容',
						cancelText:'跳过答题',
						confirmText:'去答题',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:`/pages/paper/paper?course_id=${courseId}`
								})
							} else if (res.cancel) {
								// 跳过答题
								skipQuestion({course_id:courseId}).then((res)=>{
									if(res.data.code == 1){
										// uni.showToast({
										// 	title: '跳过成功',
										// 	icon: 'success',
										// 	duration: 2000
										//  })
										 uni.navigateTo({
										 	url:`/pages/chapterPage/chapterPage?course_id=${courseId}&isAnswer=${isAnswer}`
										 })
									}
								}).catch((e)=>{
									console.log(e);
								})
							}
						}
					});
					
					// uni.hideHomeButton()
				}
				
			}
		},
		// computed:{
		// 	...mapState({
		// 	    userLoginTime: state => state.user.userLoginTime
		// 	})
		// },
		// watch:{
		// 	userLoginTime: {
		// 	  handler: function (newValue, oldValue) {
		// 		if(newValue == true){
		// 			this.$nextTick(() => {
		// 				this.$refs.login.modal = true;
		// 			})
		// 		}
		// 	  },
		// 	},
		// }
	}
</script>

<style lang="scss">
	.scroll-view-height {
		// width: 100vw;
		// height: 100vh;
		// white-space: nowrap;
		/* 页面高度减去包含状态栏、标题、tab组件的高度 */
		height: calc(100vh - var(--status-bar-height) - 178rpx);
	}

	// .wrap {
	// 	display: flex;
	// 	flex-direction: column;
	// 	height: calc(100vh - var(--window-top));
	// 	width: 100%;
	// 	white-space: nowrap;
	// }

	.list-content {
		background-color: #F4F4F4;
	}

	.content_CourseList {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 20rpx 20rpx;
		border-radius: 20rpx;

		.courseList {
			width: 100%;
			margin-top: 15rpx;
			border: 1px solid lightgray;
			border-radius: 20rpx;
			padding: 15rpx;
			position: relative;
			.leftBox{
				width: 450rpx;
				.courseImg {
					width: 150rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				.courseText {
					margin-left: 20rpx;
					line-height: 60rpx;
				}
			}
			.rightBox{
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				height: 40rpx;
			}
		}
	}
</style>